<template>
  <div class="basic-info-view">
    <a-spin :loading="loading">
      <a-descriptions :column="2" size="medium" bordered>
        <a-descriptions-item label="申请编号">
          {{ data.applicationNo || subsidyApplicationId || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="企业名称">
          {{ data.enterpriseAccount?.enterpriseName || data.enterpriseName || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="联系人">
          {{ data.enterpriseAccount?.enterprisePerson || data.submitter || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="申请状态">
          <a-tag :color="getStatusColor(data.status)">{{ getStatusText(data.status) }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="项目名称">
          {{ data.projectName || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="项目地址">
          {{ data.projectAddress || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="补贴申领面积">
          {{ data.amount ? `${data.amount}亩` : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="验收时间">
          {{ data.acceptDate || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="申请时间">
          {{ data.createTime || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="更新时间">
          {{ data.updateTime || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="项目情况" :span="2">
          <div class="project-situation">
            {{ data.projectDescription || '-' }}
          </div>
        </a-descriptions-item>
      </a-descriptions>
      
      <!-- 申请文件展示 -->
      <div class="files-section">
        <h3 class="section-title">申请文件</h3>
        <div class="attachments-grid">
          <!-- 设计方案 -->
          <div class="attachment-card">
            <div class="attachment-header">
              <span class="attachment-title">设计方案</span>
              <a-tag color="blue" size="small">必需</a-tag>
            </div>
            <div v-if="designSchemeFile" class="attachment-content">
              <div class="attachment-preview" v-if="isImageFile(designSchemeFile.fileName)">
                <a-image
                  :src="designSchemeFile.fileUrl"
                  :preview="true"
                  width="120"
                  height="90"
                  fit="cover"
                  class="attachment-image"
                />
                <div class="preview-overlay">
                  <a-button-group size="mini">
                    <a-button type="primary" @click="previewFile(designSchemeFile)">
                      <template #icon><IconEye /></template>
                    </a-button>
                    <a-button @click="downloadFile(designSchemeFile)">
                      <template #icon><IconDownload /></template>
                    </a-button>
                  </a-button-group>
                </div>
              </div>
              <div class="attachment-icon-wrapper" v-else>
                <div class="attachment-icon">
                  <IconFile class="file-icon" />
                </div>
              </div>
              <div class="attachment-info">
                <div class="attachment-name" :title="designSchemeFile.fileName">{{ designSchemeFile.fileName }}</div>
                <div class="attachment-size">{{ formatFileSize(designSchemeFile.fileSize) }}</div>
                <div class="attachment-actions">
                  <a-button size="mini" type="primary" @click="previewFile(designSchemeFile)">
                    <template #icon><IconEye /></template>
                    预览
                  </a-button>
                  <a-button size="mini" @click="downloadFile(designSchemeFile)">
                    <template #icon><IconDownload /></template>
                    下载
                  </a-button>
                </div>
              </div>
            </div>
            <div v-else class="no-file">
              <div class="no-file-text">暂无文件</div>
            </div>
          </div>
          
          <!-- 验收意见 -->
          <div class="attachment-card">
            <div class="attachment-header">
              <span class="attachment-title">验收意见</span>
              <a-tag color="orange" size="small">必需</a-tag>
            </div>
            <div v-if="acceptanceOpinionFile" class="attachment-content">
              <div class="attachment-preview" v-if="isImageFile(acceptanceOpinionFile.fileName)">
                <a-image
                  :src="acceptanceOpinionFile.fileUrl"
                  :preview="true"
                  width="120"
                  height="90"
                  fit="cover"
                  class="attachment-image"
                />
                <div class="preview-overlay">
                  <a-button-group size="mini">
                    <a-button type="primary" @click="previewFile(acceptanceOpinionFile)">
                      <template #icon><IconEye /></template>
                    </a-button>
                    <a-button @click="downloadFile(acceptanceOpinionFile)">
                      <template #icon><IconDownload /></template>
                    </a-button>
                  </a-button-group>
                </div>
              </div>
              <div class="attachment-icon-wrapper" v-else>
                <div class="attachment-icon">
                  <IconFile class="file-icon" />
                </div>
              </div>
              <div class="attachment-info">
                <div class="attachment-name" :title="acceptanceOpinionFile.fileName">{{ acceptanceOpinionFile.fileName }}</div>
                <div class="attachment-size">{{ formatFileSize(acceptanceOpinionFile.fileSize) }}</div>
                <div class="attachment-actions">
                  <a-button size="mini" type="primary" @click="previewFile(acceptanceOpinionFile)">
                    <template #icon><IconEye /></template>
                    预览
                  </a-button>
                  <a-button size="mini" @click="downloadFile(acceptanceOpinionFile)">
                    <template #icon><IconDownload /></template>
                    下载
                  </a-button>
                </div>
              </div>
            </div>
            <div v-else class="no-file">
              <div class="no-file-text">暂无文件</div>
            </div>
          </div>
          
          <!-- 支付通知 -->
          <div class="attachment-card">
            <div class="attachment-header">
              <span class="attachment-title">支付通知</span>
              <a-tag color="green" size="small">可选</a-tag>
            </div>
            <div v-if="paymentNoticeFile" class="attachment-content">
              <div class="attachment-preview" v-if="isImageFile(paymentNoticeFile.fileName)">
                <a-image
                  :src="paymentNoticeFile.fileUrl"
                  :preview="true"
                  width="120"
                  height="90"
                  fit="cover"
                  class="attachment-image"
                />
                <div class="preview-overlay">
                  <a-button-group size="mini">
                    <a-button type="primary" @click="previewFile(paymentNoticeFile)">
                      <template #icon><IconEye /></template>
                    </a-button>
                    <a-button @click="downloadFile(paymentNoticeFile)">
                      <template #icon><IconDownload /></template>
                    </a-button>
                  </a-button-group>
                </div>
              </div>
              <div class="attachment-icon-wrapper" v-else>
                <div class="attachment-icon">
                  <IconFile class="file-icon" />
                </div>
              </div>
              <div class="attachment-info">
                <div class="attachment-name" :title="paymentNoticeFile.fileName">{{ paymentNoticeFile.fileName }}</div>
                <div class="attachment-size">{{ formatFileSize(paymentNoticeFile.fileSize) }}</div>
                <div class="attachment-actions">
                  <a-button size="mini" type="primary" @click="previewFile(paymentNoticeFile)">
                    <template #icon><IconEye /></template>
                    预览
                  </a-button>
                  <a-button size="mini" @click="downloadFile(paymentNoticeFile)">
                    <template #icon><IconDownload /></template>
                    下载
                  </a-button>
                </div>
              </div>
            </div>
            <div v-else class="no-file">
              <div class="no-file-text">暂无文件</div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, getCurrentInstance } from 'vue';
import { Message } from '@arco-design/web-vue';
import {
  IconFile,
  IconEye,
  IconDownload
} from '@arco-design/web-vue/es/icon';
import { DICT } from '~/utils/dict.js';

// 定义props
const props = defineProps({
  subsidyApplicationId: {
    type: String,
    default: ""
  },
  data: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
});

// 全局实例
const { proxy } = getCurrentInstance();

// 加载字典数据
const dicts = proxy.LoadDicts([DICT.lindiSubsidyApplicationStatus]);

// 响应式数据
const designSchemeFile = ref(null);
const acceptanceOpinionFile = ref(null);
const paymentNoticeFile = ref(null);

// 获取状态颜色
const getStatusColor = (status) => {
  if (!status || !dicts[DICT.lindiSubsidyApplicationStatus]) {
    return 'gray';
  }
  const dict = dicts[DICT.lindiSubsidyApplicationStatus].find(
    (d) => String(d.dictKey) === String(status)
  );
  return dict?.dictClass || 'gray';
};

// 获取状态文本
const getStatusText = (status) => {
  if (!status || !dicts[DICT.lindiSubsidyApplicationStatus]) {
    return '未知状态';
  }
  const dict = dicts[DICT.lindiSubsidyApplicationStatus].find(
    (d) => String(d.dictKey) === String(status)
  );
  return dict ? dict.dictValue : '未知状态';
};

// 判断是否为图片文件
const isImageFile = (fileName) => {
  if (!fileName) return false;
  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
  const extension = fileName.toLowerCase().substring(fileName.lastIndexOf('.'));
  return imageExtensions.includes(extension);
};

// 格式化文件大小
const formatFileSize = (size) => {
  if (!size) return '-';
  const sizeNum = parseInt(size);
  if (sizeNum < 1024) {
    return sizeNum + ' B';
  } else if (sizeNum < 1024 * 1024) {
    return (sizeNum / 1024).toFixed(1) + ' KB';
  } else {
    return (sizeNum / (1024 * 1024)).toFixed(1) + ' MB';
  }
};

// 加载文件数据
const loadFiles = () => {
  // 重置文件数据
  designSchemeFile.value = null;
  acceptanceOpinionFile.value = null;
  paymentNoticeFile.value = null;
  
  // 从后端返回的 subsidyApplicationFileList 中获取文件数据
  if (props.data.subsidyApplicationFileList && Array.isArray(props.data.subsidyApplicationFileList)) {
    props.data.subsidyApplicationFileList.forEach(item => {
      if (item.file) {
        const fileData = {
          ...item.file,
          subsidyApplicationFileId: item.subsidyApplicationId
        };
        
        // 根据 fileType 分类文件
        switch (item.fileType) {
          case '0': // 设计方案
            designSchemeFile.value = fileData;
            break;
          case '1': // 验收意见
            acceptanceOpinionFile.value = fileData;
            break;
          case '2': // 支付通知
            paymentNoticeFile.value = fileData;
            break;
          case '3': // 付款记录
            // 如果需要展示付款记录，可以在这里处理
            break;
        }
      }
    });
  }
};

// 下载文件
const downloadFile = (file) => {
  if (!file || !file.fileUrl) {
    Message.error('文件链接无效');
    return;
  }
  
  const link = document.createElement('a');
  link.href = file.fileUrl;
  link.download = file.fileName || '下载文件';
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

// 预览文件
const previewFile = (file) => {
  if (!file || !file.fileUrl) {
    Message.error('文件链接无效');
    return;
  }
  window.open(file.fileUrl, '_blank');
};

// 监听 data 变化，重新加载文件
watch(
  () => props.data,
  (newData) => {
    if (newData) {
      loadFiles();
    }
  },
  { deep: true, immediate: true }
);

// 组件挂载时加载数据
onMounted(() => {
  loadFiles();
});
</script>

<style scoped>
.basic-info-view {
  padding: 16px;
}

.project-situation {
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.6;
  color: #4e5969;
}

:deep(.arco-descriptions-item-label) {
  font-weight: 500;
  color: #1d2129;
}

:deep(.arco-descriptions-item-value) {
  color: #4e5969;
}

/* 申请文件展示样式 */
.files-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f2f3f5;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
}

.attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.attachment-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e6eb;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.attachment-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.attachment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f7f8fa;
  border-bottom: 1px solid #e5e6eb;
}

.attachment-title {
  font-size: 14px;
  font-weight: 500;
  color: #1d2129;
}

.attachment-content {
  padding: 16px;
}

.attachment-preview {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}

.attachment-image {
  width: 100%;
  height: 90px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.attachment-preview:hover .attachment-image {
  transform: scale(1.05);
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.attachment-preview:hover .preview-overlay {
  opacity: 1;
}

.attachment-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  background: linear-gradient(135deg, #f7f8fa 0%, #e5e6eb 100%);
  margin-bottom: 12px;
}

.attachment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-icon {
  font-size: 24px;
  color: #165dff;
}

.attachment-info {
  text-align: center;
}

.attachment-name {
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-size {
  font-size: 12px;
  color: #86909c;
  margin-bottom: 12px;
}

.attachment-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.no-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: #c9cdd4;
  padding: 16px;
}

.no-file-text {
  font-size: 14px;
}

@media (max-width: 768px) {
  .attachments-grid {
    grid-template-columns: 1fr;
  }
}
</style>